<!DOCTYPE html>
<html>
<head>
    <title>Document Search</title>
    <meta charset="UTF-8">
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .search-box { display: flex; margin-bottom: 20px; }
        input[type="text"] { flex: 1; padding: 10px; font-size: 16px; }
        button { padding: 10px 20px; background: #0066cc; color: white; border: none; cursor: pointer; }
        select { padding: 10px; margin-left: 10px; }
        .result { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
        .title { font-weight: bold; margin-bottom: 5px; }
    </style>
</head>
<body>
<h1>文档搜索</h1>

<div class="search-box">
    <input type="text" id="query" placeholder="请输入关键词">
    <select id="language">
        <option value="en">English</option>
        <option value="zh">Chinese</option>
    </select>
    <button onclick="performSearch()">查询</button>
</div>

<div id="results"></div>

<script>
    function performSearch() {
        const query = document.getElementById('query').value;
        const language = document.getElementById('language').value;

        if (!query) {
            alert('请输入关键词');
            return;
        }

        fetch(`/search?q=${encodeURIComponent(query)}&lang=${language}`)
            .then(response => response.text())
            .then(html => {
                document.getElementById('results').innerHTML = html;
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('results').innerHTML = '<p>Error performing search</p>';
            });
    }

    // Allow search on Enter key
    document.getElementById('query').addEventListener('keyup', function(event) {
        if (event.key === 'Enter') {
            performSearch();
        }
    });
</script>
</body>
</html>